<template>
	<view class="index-top flex justify-between align-center border-bottom">
		<view class="flex align-center">
			<view class="flex align-center">
				<text class="iconfont icon-jishiben ml-2 transform2" style="color: #7188CD;"></text>
			</view>
			<view class="flex flex-column ml-2">
				<text class="flex-1" style="line-height: 30px;">KXKY-记事本</text>
				<view class="flex font-small text-hover-light noDrag">
					<view class="iconfont icon-zhuye mr-1" hover-class="activeIcon" @click="refreshPage">
					</view>
					<view class="iconfont icon-fanhui mr-1" hover-class="activeIcon" @click="refreshPage"></view>
					<view class="iconfont icon-fanhui1 mr-1" hover-class="activeIcon" @click="back" v-if="canBack">
					</view>
				</view>
			</view>
		</view>
		<view class="font-smaller noDrag"></view>
		<view class="p-2  flex align-center opacity7">
			<!-- alwaysOnTop 窗口置顶  FullScreen -->
			<uni-tooltip :content="`${AsyncLength}上传到云服务器`">
				<view @click="upload()"
					class="top-icon noDrag rounded-circle p-1 iconfont icon-yunshangchuan_o font-lg ">
				</view>
			</uni-tooltip>

			<view class="top-icon noDrag rounded-circle p-1 iconfont icon-guanyu font-lg "></view>
			<view class="top-icon noDrag rounded-circle p-1 iconfont icon-shezhi2 font-lg "></view>
			<uni-tooltip content="全屏显示">
				<view @click="toIpcMain('FullScreen')"
					:class="[electronState.isFullScreen?'icon-suoxiao':'icon-fangda']"
					class="top-icon noDrag rounded-circle p-1 iconfont font-lg "></view>
			</uni-tooltip>
			<uni-tooltip content="窗口置顶">
				<view @click="toIpcMain('alwaysOnTop')"
					:class="[electronState.isAlwaysOnTop?'icon-tuding':'icon-tuding1']"
					class="top-icon noDrag rounded-circle p-1 iconfont font-lg"></view>
			</uni-tooltip>

			<view @click="toIpcMain('minimize2')"
				class="top-icon noDrag rounded-circle p-1 iconfont icon-jian font ml-2  transform11"></view>
			<view @click="toIpcMain('maximize')" :class="[electronState.hasMax?'icon-zuidahua':'icon-zuidahua-1']"
				class="top-icon noDrag rounded-circle p-1 iconfont  font  transform13"></view>
			<view @click="toIpcMain('closeApp')"
				class="top-icon noDrag rounded-circle p-1 iconfont icon-cuohao  font transform12"></view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		reactive,
		onMounted,
		watch
	} from 'vue'
	import {
		upload
	} from "@/hooks/upload.js"
	import {
		AsyncLength,
		getAsyncList,
		asyncList
	} from "@/hooks/Async.js"
	defineProps({
		canBack: { //动态调整列表和窗口的宽度同步
			type: [Boolean, String],
			default: false
		}
	})
	const {
		ipcRenderer
	} = require('electron')
	const electronState = reactive({
		isAlwaysOnTop: false,
		hasMax: false, //窗口是否最大化
		isFullScreen: false, //窗口是否全屏
	})
	// 向主进程发送消息
	const toIpcMain = (e) => {
		ipcRenderer.send('action', e)
	}
	const uniState = reactive({ //uniapp组件相关参数信息
		msgType: 'info',
		messageText: '这是一条信息提示'
	})
	const noticeToggle = (title, icon = "none") => {
		uni.showToast({
			title: title,
			icon: icon
		})
	}
	// 刷新页面
	const refreshPage = () => {
		uni.reLaunch({
			url: '/pages/index/index',
			success: () => {
				uni.showToast({
					title: "页面已刷新",
					icon: "none"
				})
			}
		});
	}
	// 刷新页面
	const back = () => {
		uni.navigateBack({
			delta: 1
		});
	}
	onMounted(() => {
		getAsyncList()
		// 监听主进程事件
		ipcRenderer.on('hasMax', (e, v) => {
			electronState.hasMax = v
		})
		// 监听是否置顶事件
		ipcRenderer.on('isAlwaysOnTop', (e, v) => {
			electronState.isAlwaysOnTop = v
			if (v) {
				noticeToggle('已置顶')
			} else {
				noticeToggle('已取消置顶')
			}

		})
		// 监听是否全屏事件isFullScreen
		ipcRenderer.on('isFullScreen', (e, v) => {
			electronState.isFullScreen = v
			if (v) {
				noticeToggle('已全屏')
			} else {
				noticeToggle('已取消全屏')
			}

		})
	})
</script>
<style scoped>
	.activeIcon {
		color: black !important;
		cursor: pointer;
	}
</style>
